<template>
  <!-- 选择图片 -->
  <div>
    <el-button style="margin-right: 10px;" @click="detect" type="success">检测</el-button>
    <!-- 选择图片，可能考虑删除 -->
    <el-select v-model="currentImage.name" placeholder="选择图片" style="width: 200px; margin-right: 10px;"
      @click="updateImageList">
      <el-option v-for="item in imageList" :key="item" :label="item" :value="item" @click="selectImage(item)" />
    </el-select>
    <!-- 选择模型 -->
    <el-select v-model="currentModel" placeholder="选择模型" size="medium" style="width: 240px; margin-right: 10px;">
      <el-option v-for="item in model_info" :key="item.name" :label="item.name" :value="item.name"
        :title="item.message" />
    </el-select>
    <!-- 保存结果 -->
    <el-button style="margin-right: 10px;" @click="saveResult" type="primary">保存结果</el-button>
  </div>
  <!-- 展示界面 -->
  <div class="image-container">
    <div class="image-item">
      <h3>当前图片</h3>
      <img class="detect-image" :src="currentImage.url" alt="当前图片">
    </div>
    <div class="image-item">
      <h3>检测结果</h3>
      <img class="detected-image" :src="currentImage.detected_url" alt="检测结果">
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  // 变量
  imageList,
  currentImage,
  // 方法
} from '@/components/handleDetect'
import { SERVER_URL, model_info } from '@/components/handleApp'

/**变量 */
const route = useRoute()
const currentModel = ref('')  // 当前选择的模型
const usingModel = ref('')    // 当前使用的模型，检测后更新为选择的模型

/**函数 */
/**
 * 选择图片并展示
 */
const selectImage = (item: string) => {
  axios.get(`${SERVER_URL}/detect/get-one-image/`, {
    // 携带图片名称和模型名称
    params: {
      img_name: item
    },
    // 以blob格式获取图片
    responseType: 'blob'
  })
    .then((res: any) => {
      const url = URL.createObjectURL(res.data)
      if (currentImage.value.url !== url) {
        currentImage.value.detected_url = ''
      }
      currentImage.value.url = url
    })
    .catch((err: any) => {
      console.log(err)
    })
}

/**
 * 检测当前选择的图片
 */
const detect = () => {
  if (currentModel.value === '') {
    ElMessage({
      message: '请先选择模型',
      type: 'error',
    })
    return
  }
  axios.get(`${SERVER_URL}/detect/start-detect/`, {
    params: {
      img_name: currentImage.value.name,
      model_name: currentModel.value
    },
    responseType: 'blob'
  })
    .then((res: any) => {
      const url = URL.createObjectURL(res.data)
      currentImage.value.detected_url = url
      // 更新检测模型
      usingModel.value = currentModel.value
    })
    .catch((err: any) => {
      console.log(err)
    })
}

/**
 * 更新图片列表
 */
function updateImageList() {
  // 获取所有图片
  axios.get(`${SERVER_URL}/detect/get-all-images/`)
    .then((res: any) => {
      const data = res.data
      imageList.value = []
      for (const item of data) {
        imageList.value.push(item.img_name)
      }
    })
    .catch((err: any) => {
      console.log(err)
    })
}

/**
 * 保存当前检测结果
 */
function saveResult() {
  if (currentImage.value.detected_url === '') {
    ElMessage({
      message: '请先检测图片',
      type: 'error',
    })
    return
  }

  axios.post(`${SERVER_URL}/detect/save-image/`, {
    img_name: currentImage.value.name,
    model_name: usingModel.value
  })
    .then((res: any) => {
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
    })
    .catch((err: any) => {
      console.log(err)
    })
}

/**
 * 生命周期函数
 */
onMounted(() => {
  console.log('detectView mounted')
  // 更新图片列表
  updateImageList()
  currentImage.value = {
    name: '',
    url: '',
    detected_url: ''
  }

  const img_name = route.query.img_name
  if (img_name) {
    console.log(img_name)
    currentImage.value.name = img_name as string
    selectImage(img_name as string)
  }
})
</script>

<style scoped>
.image-container {
  display: flex;
  /* 使用flexbox布局 */
  gap: 20px;
  /* 图片之间的间距 */
}

.image-item {
  display: flex;
  flex-direction: column;
  /* 使标签和图片垂直排列 */
  align-items: center;
  /* 居中对齐 */
}

.detect-image,
.detected-image {
  margin-top: 10px;
  width: 60%;
  height: auto;
}
</style>
